<template>
	<z-nav-bar title="绑定教练" transparentTitle="auto" :isBlack="false" @clickLeft="clickLeft"></z-nav-bar>
	<view class="page-layout flex_cc">
		<view class="uni-mb-200">
			<view class="page-scroll">
				<view class="coach">
					<view class="title">降杆</view>
					<view class="user">
						<image :src="setting.oss_pub_domain + info.avatar"></image>
						<view class="right">
							<view class="name">
								<view>{{ info.nickName }}</view>
								<text>教练</text>
							</view>
							<view class="dsc">邀请您绑定该教练</view>
						</view>
					</view>
					<view class="bottom">智慧高尔夫教学系统</view>
				</view>
			</view>
			<view class="footer-button" @click="submit">
				<text>我要绑定该教练</text>
			</view>
		</view>
	</view>
</template>

<script>
import { bindCaoch, bindInstructorInfo } from '@/api/student.js';
export default {
	data() {
		return {
			sceneId: 21,
			info: {},
			newUser: 0
		};
	},
	methods: {
		submit() {
			bindCaoch({ id: this.sceneId }).then((res) => {
				this.tools.alert('绑定成功');
				setTimeout(() => {
					if (this.newUser)
						uni.redirectTo({
							url: '/pages/student/guide/gender'
						});
					else
						uni.reLaunch({
							url: '/pages/tabbar-page/tabbar-0'
						});
				}, 1000);
			});
		},
		getInfo() {
			bindInstructorInfo({ id: this.sceneId })
				.then((res) => {
					this.info = res;
				})
				.catch((err) => {
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/tabbar-page/tabbar-0'
						});
					}, 1000);
				});
		},
		clickLeft() {
			uni.reLaunch({
				url: '/pages/tabbar-page/tabbar-0'
			});
		}
	},
	onLoad(query) {
		this.sceneId = query.scene;
	},
	onShow() {
		this.newUser = uni.getStorageSync('new-user') || 0;
		const token = uni.getStorageSync('token');
		if (token) this.getInfo();
		else
			uni.navigateTo({
				url: '/pages/my/login/login?back=1'
			});
	}
};
</script>

<style lang="scss">
.page-layout {
	background: url($static_url + 'bind_bg.png') no-repeat top 0 left 0;
	background-size: 750rpx auto;
	height: 100vh;
	.coach {
		width: 550rpx;
		margin: 0 auto;
		background: url($static_url + 'bind_coach_bg.png') no-repeat top 0 left 0;
		background-size: 630rpx auto;
		padding: 40rpx;
		border-radius: 30rpx;
	}
	.coach .title {
		font-size: 32rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #1a2233;
	}
	.coach .user {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 52rpx;
	}
	.coach .user image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
		margin-right: 24rpx;
	}
	.coach .user .right {
		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1a2233;
	}
	.coach .user .right .name {
		display: flex;
		align-items: center;
	}
	.coach .user .right text {
		display: flex;
		width: 64rpx;
		height: 32rpx;
		background: #ff7742;
		border-radius: 16rpx;
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		align-items: center;
		justify-content: center;
		margin-left: 12rpx;
	}
	.coach .user .right .dsc {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8a8f99;
		margin-top: 12rpx;
	}
	.bottom {
		margin-top: 96rpx;
		text-align: right;
		font-size: 24rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #1a2233;
	}
	.footer-button {
		height: 130rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			display: flex;
			width: 640rpx;
			height: 80rpx;
			background: #ff7742;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			align-items: center;
			justify-content: center;
		}
	}
}
</style>
